Diagrama de temas

  • Línea

    • La mejor manera de aprender sobre programación es escribiendo tus propios programas. Vamos a empezar por hacer el programa lo más corto posible usando Processing.

      Nota: Ahora vas a empezar a utilizar el Processing IDE, así que si aún no lo has instalado, clica aquí

      Ejemplo 1.1


      En este ejemplo, escribirás un programa para dibujar una línea en la pantalla.

      Instrucciones

      1. Abre el IDE de Processing y escribe el siguiente programa:
        2. 1
        2
        3
        line(0, 0, 100, 100);
        source: http://verkstad.cc/urler/ctc-g-b1-c-1
      2. Ejecuta el programa haciendo clic en este icono: run

      Resultado

      Al ejecutar el programa verás como aparece una línea en la ventana de programa.


      Comandos

      • line(x1, y1, x2, y2) : Dibuja una línea desde las coordenadas x1,y1 hasta x2,y2.

      También necesitas saber:

      • Cada línea de código termina con un puto y coma, ';'. Si te olvidas de ponerlo, el código no podrá ser compilado ni ejecutado.
      • Por defecto, las ventanas de Processing son de 100 x 100 píxeles.
      • Por defecto, el color del fondo es gris y para dibujar es el negro. Pero por supuesto, todo esto se puede cambiar.


      Cómo funciona

      • Se dibuja una línea desde las coordenadas (0, 0), esquina superior izquierda de la ventana, hasta las coordenadas (100, 100) – esquina inferior derecha.

      Funciones y parámetros


      En el ejemplo anterior, dibujaste una línea con el siguiente comando line(x1, y1, x2, y2). Este comando se llama función. Una función contiene un conjunto de comandos o instrucciones en tan sólo una línea de código. La ejecución de esas instrucciones depende de los parámetros de la función. En line(x1, y1, x2, y2) los parámetros son x1, y1, x2 y y2. La línea que se dibuja cuando llamas a la función line() depende de los parámetros que le pasas a esta función. Cada función puede tener un número diferente de parámetros.

      Muchas funciones devuelven un valor cuando las llamamos. Por ejemplo, en el proyecto del reloj de Post-it® emplearás una función llamada hour() que devuelve la hora actual, un número entre 0 y 23.

      En el siguiente ejemplo aprenderás como usar otras dos funciones. Todos estos ejemplos están basados en funciones, lo que significa que los comandos que se ejecutan cuando las llamamos están incluidos en Processing. Puedes escribir tus propias funciones, aprenderás como hacerlo en los proyectos del segundo bloque.


      Ejemplo 1.2

      En este ejemplo, escribirás un programa que dibuje dos líneas de diferentes colores sobre un fondo blanco.

      Instrucciones

      1. Escribe y ejecuta el siguiente programa:
        2. 1
        2
        3
        4
        5
        background(255);
line(0, 0, 100, 100);
stroke(0, 0, 255);
line(0, 100, 100, 0);
        source: http://verkstad.cc/urler/ctc-g-b1-c-2

      Resultado

      En este caso dos líneas, una azul y una negra aparecen dibujadas en la ventana de programa.


      Comandos

      • background(gray): Establece el color de fondo desde 0 - negro, hasta 255 - blanco. También puedes utilizar background(red, green, blue)para establecer el color que tú quieras.
      • stroke(red, green, blue): Establece el color de la línea. Cada componente de color puede ser un número desde 0 hasta 255.


      Cómo funciona

      Tus programas se ejecutarán siempre de arriba a abajo línea por línea. Lo que este programa hace es:

      • Establece el color de fondo a blanco.
      • Dibuja la línea negra igual que en el ejemplo anterior, desde la coordenada (0, 0) - esquina superior izquierda, a (100, 100) - esquina inferior derecha.
      • Establece el color de línea a azul.
      • Se dibuja la segunda línea desde la coordenada (0, 100) – esquina inferior izquierda, a (100, 0) – esquina superior derecha con color azul.

      ¡Sigue experimentando!


      • Añade más líneas de diferentes colores y cambia el color de fondo.
      • Cambia el orden del programa. ¿Qué ocurre si, por ejemplo, cambias el color de fondo al final?
      • Para seguir aprendiendo sobre Processing, haz click en la página de referencia de Processing.